<template>
  <!-- 工程管理 -->
  <div class="wrapper">
    <search-form :area="'basic'" :addType="addType" :display="'representative'" @search="search" @handleDel="handleDel" @handleAdd="handleAdd">
    </search-form>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="(record) => record.id" :columns="columns" :dataSource="tableList" :pagination="pagination" :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }">
            <template slot="telTitle">
              <span>{{
                queryParam.personType == 1 ? "定位手机" : "手机"
              }}</span>
            </template>
            <span slot="status" slot-scope="text">
              <span v-if="queryParam.ReminderType == 1" class="circular red">
              </span>
              <span v-if="queryParam.ReminderType == 2" class="circular orange">
              </span>
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a size="small" type="link" @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a size="small" type="link" @click="handleView(record)">查看</a>
                <a-divider type="vertical" v-if="queryParam.personType == 3" />
                <a-popconfirm @confirm="handleSecure(record, true)" placement="left" title="确定解除?" v-if="queryParam.personType == 3 && !record.isRemove" okText="确定" cancelText="取消">
                  <!-- <a-button type="link" size="small">解除</a-button> -->
                  <a size="small" type="link">解除</a>
                </a-popconfirm>
                <a-popconfirm @confirm="handleSecure(record, false)" placement="left" title="确定解除?" v-if="queryParam.personType == 3 && record.isRemove" okText="确定" cancelText="取消">
                  <!-- <a-button type="link" size="small">解除</a-button> -->
                  <a size="small" type="link">反移除</a>
                </a-popconfirm>
                <!-- <a size="small" type="link" @click="handleSecure(record)" >解除</a> -->
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>

    <info-modal v-if="queryParam.personType != undefined && queryParam.personType != ''" :actionType="action" ref="infomodal" @save="handleSave" :personModalType="queryParam.personType"></info-modal>
  </div>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import {
  getSupervisionObjectByID,
  delSupervisionObject,
  getSupervisionObjectList,
  saveSupervisionObject,
  removeSupervisionObject,
} from "@/api/allApi";

import SearchForm from "./modules/searchform";
import InfoModal from "./modules/infomodal";
import { mapActions, mapGetters } from "vuex";
import { tranDate } from "@/utils/util";
import { personList, findType } from "@/utils/device";

const userInfo = Vue.ls.get(ACCESS_TOKEN); // DepartmentID

export default {
  components: { SearchForm, InfoModal },
  props: {
    display: {
      type: String,
      required: false,
      default: "default",
    },
  },
  async created () { },
  data () {
    return {
      action: "add",
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      spinning: false,
      // IsSpecial: this.$store.getters.IsSpecial,
      // IsSpecial: this.$store.getters.IsSpecial,
      modelPush: {},
      PushTip: "",
      visible: false,
      tableList: [],
      form: this.$form.createForm(this),
      queryParam: {
        index: 1,
        pageSize: 10,
        personType: 1,
        IsRemove: false,
        ReminderType: undefined,
      },
      addType: 1,
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: "small",
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize);
        },
        position: "bottom",
      },
      RouterName: "",
      allPersonNum: 0,
      userInfoData: userInfo,
    };
  },
  watch: {
    $route: {
      handler (to) {
        console.log("valvalvalval", to);
        this.getType(to.name);
      },
    },
  },
  computed: {
    columns () {
      return this.queryParam.ReminderType == undefined
        ? [
          {
            title: "姓名",
            dataIndex: "name",
            key: "name",
            align: "center",
          },

          {
            // title: "定位手机",
            dataIndex: "tel",
            key: "tel",
            align: "center",
            slots: { title: "telTitle" },
            // scopedSlots: { title: "telTitle" },
          },
          {
            title: "身份证号",
            dataIndex: "idNumber",
            key: "idNumber",
            align: "center",
          },
          {
            title: "所属部门",
            dataIndex: "DepartmentName",
            key: "DepartmentName",
            align: "center",
          },
          {
            title: "家庭联系人",
            dataIndex: "familyLinkman",
            key: "familyLinkman",
            align: "center",
          },

          {
            title: "人员类型",
            dataIndex: "personType",
            key: "personType",
            align: "center",
          },

          {
            title: "操作",
            width: "150px",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ]
        : [
          {
            title: "姓名",
            dataIndex: "name",
            key: "name",
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "status",
            key: "status",
            align: "center",
            scopedSlots: { customRender: "status" },
          },
          {
            title: "电话",
            dataIndex: "tel",
            key: "tel",
            align: "center",
          },
          {
            title: "身份证号",
            dataIndex: "idNumber",
            key: "idNumber",
            align: "center",
          },
          {
            title: "所属部门",
            dataIndex: "DepartmentName",
            key: "DepartmentName",
            align: "center",
          },
          {
            title: "家庭联系人",
            dataIndex: "familyLinkman",
            key: "familyLinkman",
            align: "center",
          },

          {
            title: "人员类型",
            dataIndex: "personType",
            key: "personType",
            align: "center",
          },

          {
            title: "操作",
            width: "150px",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    const name = this.$route.name;
    this.getType(name);
  },
  methods: {
    getType (name) {
      this.RouterName = name;
      switch (name) {
        case "engineeringengineeringBasic":
          this.queryParam.personType = 1;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = undefined;
          this.addType = 1;
          break;
        case "engineeringresettle":
          this.queryParam.personType = 2;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = undefined;
          this.addType = 1;
          break;
        case "engineeringcare":
          this.queryParam.personType = 3;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = undefined;
          this.addType = 1;
          break;
        case "engineeringredTip":
          this.queryParam.personType = undefined;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = 1;
          this.addType = 2;
          break;
        case "engineeringyellowTip":
          this.queryParam.personType = undefined;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = 2;
          this.addType = 2;
          break;
          case "engineeringNoColorTip":
          this.queryParam.personType = undefined;
          this.queryParam.IsRemove = false;
          this.queryParam.ReminderType = 4;
          this.addType = 2;
          break;
        case "engineeringengineeringRemove":
          this.queryParam.personType = "1";
          this.queryParam.IsRemove = true;
          this.queryParam.ReminderType = undefined;
          this.addType = 2;
          break;
        case "engineeringresettleRemove":
          this.queryParam.personType = "2";
          this.queryParam.IsRemove = true;
          this.queryParam.ReminderType = undefined;
          this.addType = 2;
          break;
        case "engineeringcareRemove":
          this.queryParam.personType = "3";
          this.queryParam.IsRemove = true;
          this.queryParam.ReminderType = undefined;
          this.addType = 2;
          break;
        default:
          break;
      }
      this.initData(this.queryParam);
    },

    async initData (params) {
      this.spinning = true;
      const { data, message, page } = await getSupervisionObjectList({
        ...params,
      });
      this.spinning = false;
      this.pagination.total = page.RecordCount;
      this.tableList = data;
      this.tableList.map((a) => {
        a.startDate = tranDate(a.startDate);
        a.endDate = tranDate(a.endDate);
        a.personType = findType(personList, a.personType).label;
        a.isExamine = a.isExamine === true ? "是" : "否";
        a.isComplete = a.confirmUserID > 0 ? "是" : "否";
      });
    },
    search (data) {
      console.log(data)
      this.queryParam = { ...this.queryParam, ...data, index: 1, };
      this.pagination.current = 1;
      this.initData(this.queryParam);
    },
    handleAdd () {
      this.action = "add";
      this.$refs.infomodal.view();
    },

    async handleSave (values) {
      const { data, message, code } = await saveSupervisionObject(values);

      this.$message.success(message);
      this.$refs.infomodal.closeModal();
      this.initData(this.queryParam);
    },

    /** 编辑 */
    handleEdit (data) {
      this.action = "edit";
      getSupervisionObjectByID({ id: data.id })
        .then((res) => {

          this.$refs.infomodal.view(res.data);
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    /**
     * 批量删除
     */
    async handleDel () {
      this.spinning = true;
      const { code, message } = await delSupervisionObject(
        this.selectedRowKeys
      );
      this.spinning = false;
      this.initData(this.queryParam);
      this.selectedRowKeys = [];

      this.$message.info(message);
    },
    /**
     * 查看详情
     * @param {*} data
     */
    handleView (data) {
      this.spinning = true;
      this.action = "view";
      getSupervisionObjectByID({ id: data.id })
        .then((res) => {
          this.$refs.infomodal.view(res.data);
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    /** 解除 */
    async handleSecure (row, isRemove) {
      const { data, message } = await removeSupervisionObject({
        soID: row.id,
        isRemove: isRemove,
      });
      if (data) {
        this.$message.success(message);
        this.initData(this.queryParam);
      }
    },
    tranChooseData (data) {
      this.selectedRowKeys = data;
    },
    tRowClassName (record, idx) {
      const trClass =
        record.LineColor == "red" &&
          this.$route.name === "engineeringengineeringBasic"
          ? "tr-red"
          : "tr-p";
      return `${trClass}`;
    },
    onSelectChange (selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys;
    },
    pageOnChange (index, pageSize) {
      this.spinning = true;
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index,
      });
      Object.assign(this.queryParam, {
        pageSize,
        index,
      });
      this.initData(this.queryParam);
    },
  },
};
</script>
<style lang="less">
.wrapper {
  /deep/ .ant-badge-status-dot {
    width: 14px;
    height: 14px;
  }
}

.tr-red {
  td {
    color: red;
  }
}

.circular {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  &.red {
    background: red;
  }
  &.orange {
    background: orange;
  }
}
</style>
